<%--
  Created by IntelliJ IDEA.
  User: 杨威
  Date: 2021/9/22
  Time: 21:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<h2>添加学员信息</h2>
<table>
    <tr>
        <td>学生姓名：</td>
        <td><input type="text" id="stuName"/></td>
    </tr>
    <tr>
        <td>学生性别：</td>
        <td>
            <input type="radio" name="stuGender" class="stuGender" value="男"/>男
            <input type="radio"  name="stuGender"  class="stuGender" value="女"/>女
        </td>
    </tr>
    <tr>
        <td>手机号码：</td>
        <td><input type="text" id="stuPhone"/></td>
    </tr>
    <tr>
        <td>出生日期：</td>
        <td><input type="date" id="bornDate"/></td>
    </tr>
    <tr>
        <td>学生邮箱：</td>
        <td><input type="email" id="stuEmail"/></td>
    </tr>
    <tr>
        <td>家庭地址：</td>
        <td><input type="text" id="stuAddress"/></td>
    </tr>
    <tr>
        <td>学员班级：</td>
        <td>
            <select id="gradeId">
                <option value="1">BK-Java-2106</option>
                <option value="2">BK-Java-2107</option>
            </select>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <button onclick="insert()">提交</button>
            <input type="reset" value="重填"/>
        </td>
    </tr>
</table>

<script type="text/javascript">
    function insert() {
        var stuName = document.getElementById("stuName");
        var stuGenders = document.getElementsByClassName("stuGender");
        var stuPhone = document.getElementById("stuPhone");
        var bornDate = document.getElementById("bornDate");
        var stuEmail = document.getElementById("stuEmail");
        var stuAddress = document.getElementById("stuAddress");
        var gradeId = document.getElementById("gradeId");
        var stuGender;
        for(var i = 0;i<stuGenders.length;i++){
            if(stuGenders[i].checked==true){
                stuGender =  stuGenders[i].value;
            }
        }

        var stu = {"stuName":stuName.value,"stuGender":stuGender,"stuPhone":stuPhone.value,"bornDate":bornDate.value,"stuEmail":stuEmail.value,"stuAddress":stuAddress.value,"gradeId":gradeId.value};

        var s = JSON.stringify(stu);


        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange=function () {
            if(xhr.status==200 && xhr.readyState==4){
                var text = xhr.responseText;

                if(text == 1){
                    alert('新增学员成功！');
                }else{
                    alert('新增失败！');
                }
            }
        };

        xhr.open("post","insert",true);

        //发送的是JSON格式的数据
        xhr.setRequestHeader("Content-Type","application/json;charset=utf-8");

        xhr.send(s);
    }
</script>
</body>
</html>
